<template>
<view>
	<view class="tools">
		<!-- data-* 用于在触发同一个事件时候的传值 *可以是任何名字 -->
		<view class="tools-item" @click="showBox" data-code="1">仓库</view>
		<view class="tools-item" @click="showBox" data-code="2">商店</view>
		<view class="tools-item" @click="showBox" data-code="3">交易行</view>
		<view class="tools-item" @click="showBox" data-code="4">图鉴</view>
		<view class="tools-item" @click="showBox" data-code="5">好友</view>
		<view class="tools-item" @click="showBox" data-code="6">直播间</view>
	</view>
	
	<!-- 遮罩 -->
	<view class="shade" v-if="ckShow">
		<!-- 弹框效果 -->
		<view class="bullet-frame">
			<!-- 关闭按钮 -->
			<view class="close" @click="closeShow">
				<uni-icons type="closeempty" color="#fff" size="30"></uni-icons>
			</view>
			仓库
		</view>
	</view>
	
	<view class="shade" v-if="sdShow">
		<!-- 弹框效果 -->
		<view class="bullet-frame">
			<!-- 关闭按钮 -->
			<view class="close" @click="closeShow">
				<uni-icons type="closeempty" color="#fff" size="30"></uni-icons>
			</view>
			商店
		</view>
	</view>
	
	<view class="shade" v-if="jyhShow">
		<!-- 弹框效果 -->
		<view class="bullet-frame">
			<!-- 关闭按钮 -->
			<view class="close" @click="closeShow">
				<uni-icons type="closeempty" color="#fff" size="30"></uni-icons>
			</view>
			交易行
		</view>
	</view>
	
	<view class="shade" v-if="tjShow">
		<!-- 弹框效果 -->
		<view class="bullet-frame">
			<!-- 关闭按钮 -->
			<view class="close" @click="closeShow">
				<uni-icons type="closeempty" color="#fff" size="30"></uni-icons>
			</view>
			图鉴
		</view>
	</view>
	
	<view class="shade" v-if="hyShow">
		<!-- 弹框效果 -->
		<view class="bullet-frame">
			<!-- 关闭按钮 -->
			<view class="close" @click="closeShow">
				<uni-icons type="closeempty" color="#fff" size="30"></uni-icons>
			</view>
			<view style="overflow: hidden;height: 260px;">
				<!-- 搜索框 加好友 -->
				<AddFriends></AddFriends>
			</view>
			
		</view>
	</view>
	
	
	
</view>
</template>

<script>
import audioManager from '@/utils/audioManager.js';
import AddFriends from '@/component/friends/AddFriends.vue';
export default{
	name:"LeftTools",
	data(){
		return{
			ckShow:false,
			sdShow:false,
			jyhShow:false,
			tjShow:false,
			hyShow:false,
		}
	},
	components:{
		AddFriends
	},
	methods:{
		showBox(e){
			console.log(e);
			audioManager.playAudio('btn_music', false);
			let code = e.target.dataset.code;
			if(code == 1){
				this.ckShow = true;
			}else if(code == 2){
				this.sdShow = true;
			}else if(code == 3){
				this.jyhShow = true;
			}else if(code == 4){
				this.tjShow = true;
			}else if(code == 5){
				this.hyShow = true;
			}else if(code == 6){
				//页面路由跳转
				uni.navigateTo({
					url:"/pages/live/live"
				})
			}
		},
		closeShow(){
			audioManager.playAudio('btn_music', false);
			this.ckShow = false;
			this.sdShow = false;
			this.jyhShow = false;
			this.tjShow = false;
			this.hyShow = false;
		}
	}
}
</script>

<style scoped>
	.tools{
		width: 320px;
		height: 35px;
		background-color: rgba(0, 0, 0, 0.3);
		display: flex;
	}
	.tools-item{
		width: 20%;
		height: 35px;
		text-align: center;
		line-height: 35px;
		color: #fff;
		font-size: 12px;
		/* 鼠标移动上去变手 */
		cursor: pointer;
	}
	.tools-item:hover{
		color: brown;
	}
	
	.shade{
		width: 100%;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
		background-color: rgba(0, 0, 0, 0.5);
	}
	.bullet-frame{
		width: calc(90% - 140px);
		height: calc(90vh - 140px);
		padding: 40px;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		background-color: #fff;
		border-radius: 10px;
	}
	.close{
		width: 50px;
		height: 50px;
		background-color: #000000;
		position: absolute;
		right: -15px;
		top: -15px;
		border-radius: 50%;
		border: 2px solid #fff;
		text-align: center;
		line-height: 50px;
	}
</style>